import { Map } from "./map.js";
import { Geographica } from "./geographica.js";

// 鼠标在画布上绘图
// https://developer.mozilla.org/en-US/docs/Web/API/Element/mousedown_event

window.onload = function () {


    let map = new Map(800, 600, new Geographica(120.07, 30.67), 5);
    map.update();

    // map.pixelCenter.x += 200;
    // map.pixelCenter.y += 200;
    // map.updateState();
    // map.update();

    // 地图增加鼠标事件
    // 1、通过鼠标拖动来移动地图
    // 获取鼠标拖动事件的像素坐标变化量dx、dy
    // 使用dx和dy更新map中心点的地图像素坐标
    // 使用地图中心点像素坐标更新地图的经纬度坐标

    let domElement = map.domElement;
    let x0 = 0;
    let y0 = 0;
    let x1 = 0;
    let y1 = 0;
    let rect = domElement.getBoundingClientRect();
    domElement.addEventListener('mousedown', e => {

        x0 = e.clientX - rect.left + map.pixelCenter.x;
        y0 = e.clientY - rect.top + map.pixelCenter.y;
        let lastMove = { x: x0, y: y0 }
        function mousemove(ev) {
            x1 = ev.clientX - rect.left + map.pixelCenter.x;
            y1 = ev.clientY - rect.top + map.pixelCenter.y;
            if (lastMove.x && lastMove.y) {
                let dx = x0 - x1;
                let dy = y0 - y1;

                // 修改地图中心点的地图像素坐标
                map.pixelCenter.x += dx;
                map.pixelCenter.y += dy;
                // 修改地图的LOD
                // 跟新地图状态的函数
                map.updateState();
                // 更新地图数据并绘制地图数据
                map.update();
            }
            lastMove.x = x1;
            lastMove.y = y1;
        }
        document.addEventListener('mousemove', mousemove);
        document.addEventListener("mouseup", ()=>{
            document.removeEventListener('mousemove', mousemove)
        })
    });

    // 地图缩放事件
    domElement.addEventListener('mousewheel', e => {
        if (e.wheelDelta > 0) {
            map.levelOfDetail += 1;
        } else {
            map.levelOfDetail -= 1;
        }
        map.update();
    });

}